<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人中心-{$siteInfo['title']}-{$siteInfo['subtitle']}</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="description" content="{$siteInfo['description']}">
    <meta name="keywords" content="{$siteInfo['keyword']}">
    <meta name="author" content="Teen">
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/themes/default/static/css/common.css" />
    <link rel="stylesheet" href="/themes/default/static/layui/css/layui.css" />
    <link rel="stylesheet" href="/themes/default/static/css/home.css" />
    <link rel="stylesheet" href="/themes/default/static/css/ucenter.css" />
</head>
<body>
<div id="app">
{include file="common/header" /}
</div>
<div class="author-top">
    <div class="post-info">
        <span style="float: left">
            <i>{$myselfPost}篇</i><br />
            我的文章
        </span>
        <span style="float: left">
            <i>{$myselfReadSum}</i><br />
            总阅读
        </span>
        <span style="float: right">
            <i>{$collectionCount}篇</i><br />
            收藏
        </span>

        <span style="float: right">
            <i>{$userInfo.integral}</i><br />
            积分
        </span>
    </div>
</div>
<div class="user-avatar">
    <img src="{$userInfo.avatar|default='/themes/default/static/images/default/default_avatar.jpg'}" alt="{$userInfo.username}">
    <span>{$userInfo.username}</span>
</div>
<!--内容DIV-->
<div class="content">
   <div class="btn-post-add"><a class="layui-btn layui-btn-normal" href="/home/post/postAdd" style="float: right">投稿文章</a></div>
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">我的文章</li>
            <li>收藏文章</li>
            <li>资料</li>
            <li>密码修改</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!--我的文章-->
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>分类</th>
                            <th>作者</th>
                            <th>状态</th>
                            <th>阅读量</th>
                            <th>创建时间</th>
                            <th>操作</th></tr>
                        </thead>
                        <tbody>
                        {volist name="list" id="vo"}
                        <tr>
                            <td>{$vo.title}</td>
                            <td>{$vo.cate.cate_name}</td>
                            <td>{$vo.user_info.username}</td>
                            <td>{$vo.status}</td>
                            <td>{$vo.read_count}</td>
                            <td>{$vo.create_time}</td>
                            <td class="td-manage">
                                <a href="/home/post/postAdd?id={$vo.id}" class="layui-btn layui-btn-normal">编辑</a>
                                <a title="删除" class="layui-btn layui-btn-danger" onclick="post_del(this,'{$vo.id}')" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i></a>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                    {$list|raw}
                </div>
        </div>
            <div class="layui-tab-item">
                <!--收藏文章-->
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>分类</th>
                            <th>作者</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th></tr>
                        </thead>
                        <tbody>
                        {volist name="postCollection" id="vo"}
                        <tr>
                            <td>{$vo.title}</td>
                            <td>{$vo.cate.cate_name}</td>
                            <td>{$vo.user_info.username}</td>
                            <td>{$vo.status}</td>
                            <td>{$vo.create_time}</td>
                            <td class="td-manage">
                                <a title="取消收藏" class="layui-btn layui-btn-danger" onclick="cancelCollection(this,'{$vo.id}')" href="javascript:;">
                                    取消收藏</a>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                    {$postCollection|raw}
                </div>
            </div>
            <div class="layui-tab-item">
                <!--编辑资料-->
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <img id="upload-face" style="width:100px;height:100px;cursor:pointer" src="{$userInfo.avatar|default='/themes/default/static/images/default/default_avatar.jpg'}" />
                    </div>
                </div>
                <form class="layui-form" action="" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" value="{$userInfo.username}" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">（长度为4-12）</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="email" name="email" value="{$userInfo.email}" placeholder="请输入邮箱" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">个人说明</label>
                        <div class="layui-input-block">
                            <textarea name="intro" placeholder="别太懒，留下点什么吧！" class="layui-textarea">{$userInfo.intro}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="btn-submit" class="layui-btn" lay-submit lay-filter="userInfo">修改</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <!--编辑资料-->
                <form class="layui-form" action="" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">原密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="oldPassword"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">重复密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="rePassword"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="rePassword">确认</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{include file="common/footer" /}
</body>
<script type="text/javascript" src="/themes/default/static/js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="/themes/default/static/js/home.js" ></script>
<script type="text/javascript" src="/themes/default/static/layui/layui.js" ></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
    new Vue({
        el: '#app'
    })
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','layer']);
    //密码修改
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(rePassword)', function(data){
            if (data.field.password != data.field.rePassword){
                layer.msg("两次密码不一致",{icon:2})
                return false;
            }
            $.ajax({
                type:"POST",
                data:data.field,
                url:"/home/member/rePassword",
                success:function (e) {
                    if (e.code == 1){
                        layer.msg(e.msg,{icon:1})
                    }else {
                        layer.msg(e.msg,{icon:2})
                    }
                }
            })
            return false;
        });
    });

    //头像上传
    layui.use('upload', function(){
        var upload = layui.upload;
        upload.render({
            elem: '#upload-face'
            ,url: '/home/member/upload'
            ,auto: false
            ,accept:'images'
            ,field:'Image'
            ,bindAction: '#btn-submit'
            ,choose: function(obj){
                obj.preview(function(index, file, result){
                    $("#upload-face").attr("src",result);
                });
            }
            ,done:function(res){
                if(res.code == 0){
                    layer.msg(res.msg,{icon:2});
                }
            }
        });
    });

    //修改信息
    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(userInfo)', function(data){
            $.ajax({
                type:"post",
                data:data.field,
                url:"/home/member/updateUser",
                success:function(e){
                    if(e.code == 1){
                        layer.msg(e.msg,{icon:1});
                    }else{
                        layer.msg(e.msg,{icon:2});
                    }
                }
            })
            return false;
        });
    });
    /*文章-删除*/
    function post_del(obj, id) {
        layer.confirm('确认要删除吗？',
            function(index) {
                //发异步删除数据
                $.ajax({
                    type:"POST",
                    data:{
                        post_id:id
                    },
                    url:"/home/post/delPost",
                    success:function (e) {
                        if(e.code == 1){
                            $(obj).parents("tr").remove();
                            layer.msg(e.msg, {
                                icon: 1,
                                time: 1000
                            });
                        }else{
                            layer.msg(e.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
    }

    /*文章-取消收藏*/
    function cancelCollection(obj, id) {
        layer.confirm('确认取消收藏？',
            function(index) {
                //发异步删除数据
                $.ajax({
                    type:"POST",
                    data:{
                        post_id:id
                    },
                    url:"/home/post/cancelCollection",
                    success:function (e) {
                        if(e.code == 1){
                            $(obj).parents("tr").remove();
                            layer.msg(e.msg, {
                                icon: 1,
                                time: 1000
                            });
                        }else{
                            layer.msg(e.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
    }
</script>
</html>